<template>
  <div>
    <fxsHeader :type="2" :Data="fxsHeaderData" v-if="!wild_fire_education"></fxsHeader>
    <div class="item-card">
      <div class="item-search">
        <search-box @search="search" :placeholder="Placeholder" v-model="keyWord"></search-box>
      </div>
      <div class="select-item" v-if="is_agent == 1">
        <div class="aGroup">
          <scroll
            ref="wrapper"
            class="wrapper"
            :data="list"
            :startX="0"
            :click="true"
            :scrollX="true"
            :scrollY="false"
            :eventPassthrough="'vertical'"
          >
            <div class="content">
              <!-- <span :class="[type == 1 ? 'active':'']" @click="selectItem(1)">
                <i>所有{{ftitle_users}}(</i>
                <em>{{arr.total||0}}</em>
                <i>)</i>
              </span>
              <span :class="[type == 2 ? 'active':'']" @click="selectItem(2)">
                <i>{{level_superior}}(</i>
                <em>{{arr.superior_total||0}}</em>
                <i>)</i>
              </span>
              <span
                v-if="show_in_wx != 2 && (business_model == 3 || business_model == 2)"
                :class="[type == 3 ? 'active':'']"
                @click="selectItem(3)"
              >
                <i>{{level_top}}(</i>
                <em>{{arr.top_total||0}}</em>
                <i>)</i>
              </span>
              <span
                v-if="show_in_wx != 2 && business_model == 3"
                :class="[type == 4 ? 'active':'']"
                @click="selectItem(4)"
              >
                <i>{{level_three}}(</i>
                <em>{{arr.three_total||0}}</em>
                <i>)</i>
              </span> -->

              <van-button class="span" :color="type == 1 ? '#F30C23':'#999999'" @click="selectItem(1)" plain hairline round type="primary">
                <i>所有{{ftitle_users}}</i>
                <em>{{arr.total||0}}</em>
              </van-button>
              <van-button class="span" :color="type == 2 ? '#F30C23':'#999999'" @click="selectItem(2)" plain hairline round type="primary">
                <i>{{level_superior}}</i>
                <em>{{arr.superior_total||0}}</em>
              </van-button>
              <van-button
                v-if="show_in_wx != 2 && (business_model == 3 || business_model == 2)"
                class="span" :color="type == 3 ? '#F30C23':'#999999'"
                @click="selectItem(3)"
                plain hairline round type="primary"
              >
                <i>{{level_top}}</i>
                <em>{{arr.top_total||0}}</em>
              </van-button>
              <van-button
                v-if="show_in_wx != 2 && business_model == 3"
                class="span" :color="type == 4 ? '#F30C23':'#999999'"
                @click="selectItem(4)"
                plain hairline round type="primary"
              >
                <i>{{level_three}}</i>
                <em>{{arr.three_total||0}}</em>
              </van-button>
            </div>
          </scroll>
        </div>
      </div>
    </div>
    <div class="user-list" v-show="list.length">
      <van-list
        v-model="loading"
        :finished="finished"
        :error.sync="error"
        :immediate-check="immediateCheck"
        error-text="请求失败，点击重新加载"
        finished-text=""
        @load="onLoad"
      >
        <div v-for="(item, index) in list" :key="index" class="item clearfix">
          <div class="levelimg fl">
            <img :src="item.headimgurl || defaultPhotoImg" width="100%" alt />
          </div>
          <div class="levelinfo fl">
            <p v-if="item.nickname">
              <span>昵称：</span>
              <span>{{item.nickname}}</span>
            </p>
            <p v-if="item.user_id">
              <span>用户ID：</span>
              <span>{{item.user_id}}</span>
            </p>
            <p v-if="item.mobile && is_hide_member_phone == 0">
              <span>手机：</span>
              <span>{{item.mobile}}</span>
            </p>
            <p v-if="item.country || item.province || item.city">
              <span>地区：</span>
              <span>{{item.country}}{{item.province}}{{item.city}}</span>
            </p>
            <p v-if="item.level_name">
              <span>级别：</span>
              <span>{{item.level_name}}</span>
            </p>
            <p v-if="item.director">
              <span>上级：</span>
              <span>{{item.director}}</span>
            </p>
            <p v-else-if="item.superior_user_id">
              <span>上级ID：</span>
              <span>{{item.superior_user_id}}</span>
            </p>
            <p v-if="item.create_time">
              <span>时间：</span>
              <span>{{item.create_time}}</span>
            </p>
            <p v-if="item.rank_title">
              <span>等级：</span>
              <span>{{item.rank_title}}</span>
            </p>
            <!-- 野火教育定制 start -->
            <p v-if="wild_fire_education">
              <span>状态：</span>
              <span>{{item.wild_fire_user_status}}</span>
            </p>
            <p class="wild_fire_user_desc" v-if="wild_fire_education && item.wild_fire_user_desc">
              <span>备注：</span>
              <span>{{item.wild_fire_user_desc }}</span>
            </p>
            <!-- 野火教育定制 end -->
          </div>
        </div>
      </van-list>
    </div>
    <div class="no-data-box" v-show="!list.length && finished">
      <no-data :noData="noData"></no-data>
    </div>
  </div>
</template>

<script>
// import noDataImg from '@img/user/no_user_data.png'
import noData from '@/components/noData/index'
// import default_photo_img from '@img/default_avatar.jpg'
import fxsHeader from '@/views/user/fxs/components/fxsHeader/index'
import searchBox from '@/views/user/components/search/index'
import Scroll from '@/components/scroll/index'
import { getNextLevelUser } from '@/api/user/fxs/fxsApi'
import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      defaultPhotoImg: 'https://img.wifenxiao.com/h5-wfx/images/default_avatar.jpg',
      noData: {
        text: '暂无会员',
        img: 'https://img.wifenxiao.com/h5-wfx/images/user/no_user_data.png',
        marginTop: '10em'
      },
      is_hide_member_phone: '',
      fxsHeaderData: {
        commission_name: '',
        total_commissions: '',
        total_fee: null,
        ftitle_superior_user_order: null,
        superior_user_payment: null,

        show_fxProduct: null,
        fenxiao_goods_count: '',
        ftitle_item: '',

        next_lever_agent_count: '',
        ftitle_agents: '',

        show_myUser: null,
        next_lever_user_count: '',
        ftitle_users: '',

        show_fxOrder: null,
        fenxiao_order_count: '',
        ftitle_fx_order: ''
      },
      // 搜索组件
      Placeholder: '',
      // 分类筛选按钮控制
      show_in_wx: 0,
      business_model: '0',
      arr: {
        superior_total: '',
        three_total: '',
        top_total: '',
        total: ''
      },
      ftitle_users: '',
      level_superior: '',
      level_top: '',
      level_three: '',

      is_agent: 1,
      type: 1,
      p: 1,
      keyWord: '',
      // vant 列表组件
      loading: false,
      finished: false,
      error: false,
      immediateCheck: false,
      // 列表
      list: [],
      wild_fire_education: 0 // 野火教育定制
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      this.onLoad()
    },
    onLoad() {
      const data = {
        is_agent: this.is_agent,
        p: this.p,
        type: this.type,
        keyword: this.keyWord
      }
      getNextLevelUser(data).then(res => {
        this.loading = false
        this.$loadingWrap.close()
        if (res.status == 1) {
          let resData = res
          if (data.p == 1) {
            resData = res.data
              wx.setNavigationBarTitle({
                title: resData.data.ftitle_users
              })
            this.is_hide_member_phone = resData.data.is_hide_member_phone
            this.is_agent = resData.data.is_agent
            // 头部和导航数据
            this.fxsHeaderData.commission_name = resData.data.commission_name
            this.fxsHeaderData.total_commissions =
              resData.data.total_commissions
            // this.fxsHeaderData.ftitle_fx_order = resData.data.ftitle_fx_order
            // 分销产品
            this.fxsHeaderData.show_fxProduct = resData.data.show_fxProduct
            this.fxsHeaderData.fenxiao_goods_count =
              resData.data.fenxiao_goods_count
            if (this.is_agent == 1) {
              this.fxsHeaderData.ftitle_item = resData.data.ftitle_item
            } else if (this.is_agent == 2) {
              this.fxsHeaderData.ftitle_item = resData.data.ftitle_staff_goods
            } else if (this.is_agent == 3) {
              this.fxsHeaderData.ftitle_item = resData.data.ftitle_store_goods
            }
            // 分销商
            this.fxsHeaderData.next_lever_agent_count =
              resData.data.next_lever_agent_count
            this.fxsHeaderData.ftitle_agents = resData.data.ftitle_agents
            // 会员
            this.fxsHeaderData.show_myUser = resData.data.show_myUser
            this.fxsHeaderData.next_lever_user_count =
              resData.data.next_lever_user_count
            if (this.is_agent == 1) {
              this.fxsHeaderData.ftitle_users = resData.data.ftitle_users
            } else if (this.is_agent == 2) {
              this.fxsHeaderData.ftitle_users = resData.data.ftitle_staff_user
            } else if (this.is_agent == 3) {
              this.fxsHeaderData.ftitle_users = resData.data.ftitle_store_user
            }
            // 订单
            this.fxsHeaderData.show_fxOrder = resData.data.show_fxOrder
            this.fxsHeaderData.fenxiao_order_count =
              resData.data.fenxiao_order_count
            this.fxsHeaderData.ftitle_fx_order = resData.data.ftitle_fx_order
            // 搜索
            this.Placeholder = `请输入${resData.data.ftitle_users}ID/昵称`
            // 按钮
            this.show_in_wx = resData.data.show_in_wx
            this.business_model = resData.data.business_model
            this.arr = resData.data.arr
            this.ftitle_users = resData.data.ftitle_users
            this.level_superior = resData.data.level_superior
            this.level_top = resData.data.level_top
            this.level_three = resData.data.level_three
            // 其它
            this.noData.text = `暂无${this.ftitle_users}`
            // 页码为1时   初始列表
            this.list = []
            // 野火教育定制 start
            this.wild_fire_education = resData.data.wild_fire_education
            // 野火教育定制 ent
          }
          // 列表
          // this.list.push(...resData.data.user_list)
          // if (resData.data.user_list.length < 10) {
          //   this.finished = true
          // } else {
          //   this.p++
          // }
          if (resData.data.user_list.length) {
            this.list.push(...resData.data.user_list)
            this.p++
          } else {
            this.finished = true
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    selectItem(type) {
      if (type == this.type) return
      this.type = type
      this.keyWord = ''
      this.search()
    },
    search() {
      this.p = 1
      this.finished = false
      this.error = false
      this.loading = false
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      this.onLoad()
    }
  },
  mounted() {
    // 小程序触底加载更多
    window.addEventListener('reachbottom', () => {
      this.onLoad()
    })
  },
  components: {
    fxsHeader,
    noData,
    searchBox,
    Scroll
  }
})
</script>

<style lang="scss">
@import 'src/styles/user/cardList/index.scss';
@import 'src/styles/variables.scss';
@import 'src/styles/user/Group/index';
.wild_fire_user_desc {
  height: auto !important;
  span:last-child {
    -webkit-line-clamp: 3 !important;
  }
}
</style>
